import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { UserCircleOutline, ShopbagOutline, StarOutline } from 'antd-mobile-icons'
import { reqcartadd, reqgoodsinfo } from "../../http/api"
import { Button, Space,Toast } from 'antd-mobile'

import "./detail.less"



export default class Detail extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            name: "",
            isshow: false,
            cates:{
                uid:"",
                type:1,
                goodsid:"",
                num:1,
            }

        }
    }
    componentDidMount() {
        // console.log(this.props);
        reqgoodsinfo({ id: this.props.match.params.id }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.list,
                name: res.data.list
            })
            
        });
        console.log(this.state.list);
      
       
    }
    // 添加购物车
    addshop(){
        console.log(JSON.parse(sessionStorage.getItem("userinfo")).uid);
        console.log(this.state.list[0].id);
        reqcartadd(
            {
                uid:JSON.parse(sessionStorage.getItem("userinfo")).uid,
                goodsid:this.state.list[0].id,
                type:1,
                num:this.state.cates.num
            }
       ).then(res=>{
            if(res.data.code===200){
                Toast.show("添加成功")
                this.setState({   
                    isshow:false  
                  
               })
            }
        })
  
       }
   
    // 控制遮罩
    changeshow(){
        this.setState({
        
             ...this.state,
             isshow:true
           
        })
    }
   changenum(){
       console.log(this.state.cates.num);
       if(this.state.cates.num<=1){
        this.setState({   
            ...this.state,
            cates:{
                num:1,
            }
          
       })
       return
       }
       this.setState({
           ...this.state,
           cates:{
               num:this.state.cates.num-1
           }
         
       })
   }
    render() {
        let { list,isshow,cates,cates:{num}} = this.state
        
        return (
            <div>
                <div  onClick={()=>this.setState({isshow: false})}>
                <Header title={this.props.match.params.catename} back></Header>

                {list.map(item => {
                    return (
                        <div key={item.id}>
                            <div className="box">
                                <img src={item.img} alt="" />
                                <h3>{item.goodsname}</h3>
                                <h4>价格{item.price}</h4>
                            </div>

                        </div>
                    )
                })}
             

         

                </div>
                    {/* 遮罩层 */}
               {
                   isshow? 
                   <div className="tocartmenu">

                   <i onClick={() => this.changenum()}>-</i>
                   <i>{num}</i>
                   <i onClick={() => this.setState({
                       cates: {
                           ...this.state.cates,
                           num: this.state.cates.num + 1
                       }
                   })}>+</i>
                   <Button className="tocartmenu-btn" color='warning' size='large' onClick={() => this.addshop()}>确定</Button>
                   </div>:null
               }
                <div className="van-goods-action" >
                    <div className="van-goods-action-icon">
                        <div className="van-icon van-icon-chat-o van-goods-action-icon__icon">
                            <UserCircleOutline />
                        </div>客服
                    </div>
                    <div className="van-goods-action-icon">
                        <div className="van-icon van-icon-cart-o van-goods-action-icon__icon">
                            <ShopbagOutline />
                        </div>购物车
                    </div>
                    <div className="van-goods-action-icon">
                        <div className="van-icon van-icon-star van-goods-action-icon__icon">
                            <StarOutline />
                        </div>已收藏
                    </div>
                    <button className="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
                        <div className="van-button__content">
                            <span className="van-button__text" onClick={()=>this.changeshow()}>加入购物车</span>
                        </div>
                    </button>
                    <button className="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
                        <div className="van-button__content">
                            <span className="van-button__text">立即购买</span>
                        </div>
                    </button>
                </div>
            </div>

        )
    }
}
